<template>
  <div class="subscription">
    <div class="subscription-header">
      <!-- <div class="logo"><img src="/static/app-logo.png" mode="aspectFit"></img></div> -->
      <div class="title">Versuspk 抢购说明</div>
    </div>
    <div class="subscription-body">
      <div class="mod">
        <div class="title font-w600 color-block-2 color-2">Versuspk发行</div>
        <div class="describe">Versuspk总量10亿，永不增发，通过游戏约战手续费持续回购Versuspk，Versuspk总量不断减少直至通缩值1亿止</div>
        <div class="allot db-flex">
          <div class="allot-item" v-for="(item, index) in allotList" :key="index">
            <div class="box">
              <div class="wave">
                <div
                  class="wave-before"
                  :style="'transform: translate(0%, ' + -item.nums + '%) rotate(360deg);'"
                ></div>
              </div>
            </div>
            <div class="num color-3">{{ item.nums }}%</div>
            <div class="name">{{ item.name }}</div>
          </div>
        </div>
      </div>
      <div class="mod">
        <div class="title font-38 font-w600 color-block-2 color-2">Versuspk发行</div>
        <div class="describe">Versuspk抢购总量为5000万每7天一期共N期销售价格每期增加20%-30%</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      allotList: [
        {
          nums: 5,
          name: "创始开发团队"
        },
        {
          nums: 5,
          name: "基金会"
        },
        {
          nums: 50,
          name: "生态运营"
        },
        {
          nums: 40,
          name: "融资交易"
        }
      ]
    };
  },
  created() {},
  methods: {}
};
</script>
<style lang="scss" scoped>
.subscription {
  min-height: 100vh;
  padding: 0.2rem 0.15rem;
  background-color: #fff;
  &-header {
    .logo {
      width: 0.6rem;
      height: 0.6rem;
      margin: 0.1rem auto 0.15rem auto;
    }
    .title {
      margin-bottom: 0.3rem;
      font-size: 0.22rem;
      font-weight: 600;
      text-align: center;
    }
  }
  &-body {
    .mod {
      margin-bottom: 0.25rem;
    }
    .title {
      width: 2rem;
      padding: 0.05rem 0;
      font-size: 0.18rem;
      text-align: center;
      margin: 0.05rem auto 0.15rem auto;
    }
    .describe {
      line-height: 1.3;
      font-size: 0.14rem;
    }
    .allot {
      justify-content: space-between;
      .num {
        font-size: 0.12rem;
      }
      .name {
        font-size: 0.12rem;
      }
      &-item {
        text-align: center;
        .box {
          width: 0.4rem;
          height: 0.4rem;
          margin: 0.1rem auto;
        }
        .wave {
          position: relative;
          width: 0.4rem;
          height: 0.4rem;
          background-color: #5591da;
          border-radius: 50%;
          overflow: hidden;
          &::after,
          &-before {
            content: "";
            width: 0.4rem;
            height: 0.4rem;
            position: absolute;
            top: 0;
            left: 0;
          }
          &-before {
            background-color: rgba(255, 255, 255, 0.8);
          }
          &::after {
            background-color: rgba(255, 255, 255, 1);
            border-radius: 100%;
            transform: translate(0%, -100%) rotate(30deg);
          }
        }
      }
    }
  }
}
</style>
